import React from "react";


import {Modal, Form, message, Card, Checkbox, Radio, Button, Input} from 'antd';
import { fetchDatabaseListApi } from "../api/databaseManager";
import { modifyProjectApi, getProjectApi } from "../api/projectManager";

const confirm = Modal.confirm
const FormItem = Form.Item;
const { TextArea } = Input;

class ProjectInfo extends React.Component {

    completeCallBack;

    state = {
        visible: false,
        projectInfo: {},
        databaseList: [{},{},{}],
    }

    componentDidMount() {
        this.props.onRef(this)
        this.fetchProjectInfo();
        this.fetchDatabaseList();
    }

    showModal = (callBack) => {
        this.completeCallBack = callBack;
        this.setState({...this.state, visible: true});
    }

    handleCancel = () => {
        this.setState({...this.state, visible: false});
    }

    fetchProjectInfo = () => {
        getProjectApi(this.props.projectId).then((res)=>{
            this.setState({...this.state, projectInfo: res.data.data});
        });
    }

    fetchDatabaseList = ()=>{
        fetchDatabaseListApi().then((res)=>{
            this.setState({...this.state, databaseList:res.data.data});
        });
    }

    saveProjectInfo = ()=>{
        let that = this;
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {

                let formData = that.props.form.getFieldsValue();
                formData.id = that.props.projectId;

                /** 数据库关联 */
                formData.dbIds = this.state.projectInfo.dbIds;

                var ret = modifyProjectApi(formData);

                ret.then((res)=>{
                    that.completeCallBack('add-update');
                    that.setState({...this.state, visible: false});
                });
            }
        });
    }

    render() {
        let {visible} = this.state;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                sm: { span:  6},
            },
            wrapperCol: {
                sm: { span: 18 },
            },
        };

        var options = [];
        this.state.databaseList.map((value, index) =>{
            options.push({label: value.dbName, value: value.id});
        });

        return (
            <Modal
                width={800}
                visible={visible}
                keyboard={false}
                maskClosable={false}
                title="项目详情"
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                footer={[
                    <Button type="primary" key="project_save" onClick={this.saveProjectInfo}>保存</Button>,
                    <Button key="back" onClick={this.handleCancel}>关闭</Button>
                ]}
            >

                <Form className={"form_item_4 form_row_small_margin"} onSubmit={this.handleSubmit}>
                    <FormItem
                        {...formItemLayout}
                        label="项目名称" >
                        {getFieldDecorator('name', {
                            initialValue: this.state.projectInfo.name,
                            rules: [{ required: true, message: '不可为空' }],
                        })(
                            <Input className={"ant-col-12"} />
                        )}
                        <span className="ant-form-text"> 项目名称(英文字母) </span>
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="项目介绍" >
                        {getFieldDecorator('description', {
                            initialValue: this.state.projectInfo.description,
                            rules: [{ required: true, message: '不可为空' }],
                        })(
                            <Input className={"ant-col-12"} />
                        )}
                        <span className="ant-form-text"> 项目介绍 </span>
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="groupId" >
                        {getFieldDecorator('groupId', {
                            initialValue: this.state.projectInfo.groupId,
                            rules: [{ required: true, message: '不可为空' }],
                        })(
                            <Input className={"ant-col-12"} />
                        )}
                        <span className="ant-form-text"> com.test </span>
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="artifactId" >
                        {getFieldDecorator('artifactId', {
                            initialValue: this.state.projectInfo.artifactId,
                            rules: [{ required: true, message: '不可为空' }],
                        })(
                            <Input className={"ant-col-12"} />
                        )}
                        <span className="ant-form-text"> test_rest </span>
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="生成WebUi" >
                        {getFieldDecorator('genWeb', {
                            initialValue: this.state.projectInfo.genWeb,
                            rules: [{ required: true, message: '不可为空' }],
                        })(
                            <Radio.Group className="ant-col-12">
                                <Radio value="no">no</Radio>
                                <Radio value="yes">yes</Radio>
                            </Radio.Group>
                        )}
                        <span className="ant-form-text"> * 生成WebUi选项不可为空</span>
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="结构" >
                        {getFieldDecorator('packageType', {
                            initialValue: this.state.projectInfo.packageType,
                            rules: [{ required: true, message: '不可为空' }],
                        })(
                            <Radio.Group className="ant-col-12" disabled={true}>
                                <Radio value="standard">standard</Radio>
                                <Radio value="module">module</Radio>
                            </Radio.Group>
                        )}
                        <span className="ant-form-text"> * 结构不可为空</span>
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="项目类型" >
                        {getFieldDecorator('proType', {
                            initialValue: this.state.projectInfo.proType,
                            rules: [{ required: true, message: '不可为空' }],
                        })(
                            <Radio.Group className="ant-col-12" disabled={true}>
                                <Radio value="micro">微服务</Radio>
                                <Radio value="simple">单应用</Radio>
                            </Radio.Group>
                        )}
                        <span className="ant-form-text"> * 项目类型不可为空</span>
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="项目版本" >
                        {getFieldDecorator('version', {
                            initialValue: this.state.projectInfo.version,
                            rules: [{ required: true, message: '不可为空' }],
                        })(
                            <Input className={"ant-col-12"} />
                        )}
                        <span className="ant-form-text"> 项目版本 </span>
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="访问路径" >
                        {getFieldDecorator('contextPath', {
                            initialValue: this.state.projectInfo.contextPath,
                            rules: [{ required: true, message: '不可为空' }],
                        })(
                            <Input className={"ant-col-12"} />
                        )}
                        <span className="ant-form-text"> 访问路径 </span>
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="本地路径" >
                        {getFieldDecorator('localPath', {
                            initialValue: this.state.projectInfo.localPath,
                            rules: [{ required: true, message: '不可为空' }],
                        })(
                            <Input className={"ant-col-12"} />
                        )}
                        <span className="ant-form-text"> 生成项目本地路径 </span>
                    </FormItem>


                    <Form.Item label="数据库" >
                        <Card>

                            <Checkbox.Group options={options} onChange={(checkedValues)=>{
                                console.log('checked = ', checkedValues);
                                this.state.projectInfo.dbIds = checkedValues;
                            }} defaultValue={this.state.projectInfo.dbIds} />

                            {/* this.state.databaseList.map((value, index) =>{

                                return <Checkbox key={'database_id_'+value.id} value={value.id}>{value.dbName}</Checkbox>
                            }) */}
                            { /* validates.map((value, index) =>{

                                let _initValue = checkedValidDic[value.name];

                                return <ValidateUnit key={'ValidateUnit_' + index} cleanChild={(cb)=>{
                                    if( ! this.cleanCallBack[value.name]) {
                                        cb.call(window)
                                    }
                                    this.cleanCallBack[value.name] = cb;
                                }} initValue={_initValue} key={'v_u_k_'+index} onchangeVal={(atype, val) => {
                                    console.info('atype=' + atype + ',val=' + val)
                                    if(atype == 'add') {
                                        this.Valid_Checked_Dic[value.name] = val;
                                    } else {
                                        delete this.Valid_Checked_Dic[value.name];
                                    }
                                }} objectIndex={index} validateModel={value}></ValidateUnit>
                            }) */}
                        </Card>

                    </Form.Item>
                </Form>

            </Modal>
        );
    }
}

const _ProjectInfo = Form.create()(ProjectInfo);
export default _ProjectInfo